import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import { searchYarn } from '@/api/masterController';
import dayjs from 'dayjs';

interface YarnData {
    id: string;
    user: string;
    startedTime: number;
    elapsedTime: number;
}

const TopSearch = ({
    loading,
}: {
    loading: boolean;
}) => {
    const [yarnData, setYarnData] = useState<YarnData[]>([]);

    useEffect(() => {
        const fetchYarnData = async () => {
            try {
                const response = await searchYarn();
                if (response.data && Array.isArray(response.data)) {
                    setYarnData(response.data);
                }
            } catch (error) {
                console.error('获取YARN数据失败:', error);
            }
        };

        fetchYarnData();
    }, []);

    // 转换运行时长为分钟
    const formatElapsedTime = (milliseconds: number) => {
        const minutes = Math.ceil(milliseconds / (1000 * 60));
        return `${minutes} min`;
    };

    const columns = [
        {
            title: '排名',
            dataIndex: 'index',
            key: 'index',
            width: 80,
            render: (_: any, __: any, index: number) => index + 1,
        },
        {
            title: 'applicationId',
            dataIndex: 'id',
            key: 'id',
            render: (text: string) => <a href="/">{text}</a>,
        },
        {
            title: 'applicationType',
            dataIndex: 'applicationType',
            key: 'id',
            render: (text: string) => <a href="/">{text}</a>,
        },
        {
            title: 'user',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: 'startTime',
            dataIndex: 'startedTime',
            key: 'startedTime',
            render: (time: number) => dayjs(time).format('YYYY-MM-DDTHH:mm:ss'),
        },
        {
            title: 'processTime',
            dataIndex: 'elapsedTime',
            key: 'elapsedTime',
            sorter: (a: YarnData, b: YarnData) => a.elapsedTime - b.elapsedTime,
            render: (time: number) => formatElapsedTime(time),
        },
    ];

    return (
        <Card
            loading={loading}
            bordered={false}
            title="YARN"
            style={{
                height: '100%',
            }}
        >
            <Table<YarnData>
                rowKey={(record) => record.id}
                size="small"
                columns={columns}
                dataSource={yarnData}
                pagination={{
                    style: {
                        marginBottom: 0,
                    },
                    pageSize: 7,
                }}
            />
        </Card>
    );
};

export default TopSearch;
